<template>
	<div>
		<van-nav-bar
		  title="我的订单"
			left-text="返回"
			 @click-left="handleLeftClick"
		/>
		<van-tabs v-model="status">
		  <van-tab 
				v-for="item in statusList"
				:key="item.id"
				:title="item.name" 
				:name="item.id"></van-tab>
		</van-tabs>
		<p-page-helper @on-end="handleOnEnd" :disabled="loading">
			<van-card
			  v-for="item in list"
				:key="item.id"
			>
			  <template #title>
					<div class="order-title">
						订单编号:
						{{item.orderNo}}
					</div>
					<div class="order-time">
						下单时间:
						{{formatTime(item.insertTime)}}
					</div>
			  </template>
				<template #desc>
					<div class="goods-name">
						商品名称:
						{{item.goodsName}}
					</div>
					<div class="count">
						购买数量:
						{{item.count}}
					</div>
					<div class="pay">
						订单金额:
						{{item.pay}}
					</div>
					<div v-if="item.status == 2||item.status ==3" class="express">
						物流单号:
						{{item.expressNo}}
					</div>
					<div class="status">
						订单状态:
						<template v-for="itemStatus in statusList">
							<van-tag
								v-if="item.status == itemStatus.id"
								:key="itemStatus.id"
								:type="itemStatus.theme">
								{{itemStatus.name}}
							</van-tag>
						</template>
					</div>
				</template>
				<template #tags>
					<div style="text-align: right;padding: 10px;">
						<van-button type="info" @click="handlePreview(item)" size="mini">订单详情</van-button>
						<van-button v-if="item.status != 0" type="warning" @click="handlePreviewGoods(item)" size="mini">再次购买</van-button>
						<van-button v-if="item.status == 0" type="warning" @click="handlePay(item)" size="mini">支付</van-button>
						<van-button v-if="item.status == 0" type="danger" 
							@click="deleteOrderBuyId(item)" 
							size="mini">取消订单</van-button>
						<van-button v-if="item.status == 1||item.status == 3" 
							type="danger" 
							size="mini"
							@click="handleFallbackGoods(item)">申请退款</van-button>
						<van-button v-if="item.status == 2" type="primary"
							size="mini"
							@click="handleGotGoods(item)">确认收货</van-button>
					</div>
				</template>
			</van-card>
		</p-page-helper>
		<van-dialog v-model="show"
			title="退款原因" 
			show-cancel-button
			@confirm="onSubmit"
			@cancel="onCancel">
		  <van-field 
				border
				v-model="reason" type="textarea" placeholder="请输入退款原因" />
		</van-dialog>
		
		<van-dialog v-model="payShow"
			title="支付密码" 
			show-cancel-button
			@confirm="onPay">
		  <van-field v-model="payForm.password" type="password" placeholder="请输入密码" />
		</van-dialog>
	</div>
</template>

<script>
	import {getOrderListByUserForPage,getGoods,fallbackGoods,updateFromTeam,deleteOrder} from '@/api/order-api.js'
	export default{
		methods:{
			handleLeftClick(){
				this.$router.history.go(-1)
			},
			async getOrderListByUserForPage(){
				let res = await getOrderListByUserForPage(this.queryForm)
				if(res.data.code == 200){
					this.list = res.data.data.list
					this.page = res.data.data.page
				}
			},
			async handleOnEnd(){
				if(this.loading ==false){
					this.loading = true
				}
				if(this.page.pno<this.page.pCount){
					this.queryForm.pno = this.queryForm.pno+1
					let res = await getOrderListByUserForPage(this.queryForm)
					if(res.data.code == 200){
						this.list = this.list.concat(res.data.data.list)
						this.page = res.data.data.page
						this.loading = false
					}
				}
			},
			handlePreview(item){
				this.$router.push({path:'/order-info',query:{orderNo:item.orderNo}})
			},
			handlePreviewGoods(item){
				this.$router.push({path:'/shop-info',query:{id:item.goodsId}})
			},
			async handleGotGoods(item){
				let r = await this.$dialog.confirm({
					title:'提示',
					message:'正在确认收货，请确认您的货物已收到并无问题'
				}).catch(err => err)
				if(r == 'confirm'){
					let res = await getGoods(item.id)
					if(res.data.code == 200){
						this.$notify({type:'success',message:res.data.msg})
					}
					await this.getOrderListByUserForPage(this.queryForm)
				}
			},
			async deleteOrderBuyId(item){
				let res = await this.$dialog.confirm({
					title:'提示',
					message:'正在取消订单确认继续'
				}).catch(err => err)
				if(res == 'confirm'){
					await deleteOrder(item.id)
					await this.getOrderListByUserForPage()
				}
				
			},
			handleFallbackGoods(item){
				this.reason = ''
				this.subForm = {}
				this.show = true
				this.subForm = item
			},
			async onSubmit(){
				this.subForm.fallbackReason = this.reason
				let res = await fallbackGoods({
					...this.subForm
				})
				if(res.data.code == 200){
					await this.getOrderListByUserForPage(this.queryForm)
				}
			},
			onCancel(){
				console.log('cancel')
				this.subForm = {}
			},
			handlePay(item){
				this.payShow = true
				this.payForm = item
			},
			async onPay(){
				let res = await updateFromTeam({
					id:this.payForm.id,
					password:this.payForm.password
				})
				await this.getOrderListByUserForPage(this.queryForm)
			}
			
		},
		computed:{
			formatTime(){
				return function(time){
					let d = new Date(time);
					return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
				}
			}
		},
		data(){
			return {
				queryForm:{
					orderNo:'',
					pno:1,
					psize:10,
					status:0
				},
				reason:'',
				show:false,
				page:{},
				subForm:{},
				list:[],
				loading:false,
				payForm:{},
				payShow:false,
				statusList:[
					{
						id:0,
						name:'待支付',
						theme:'primary'
					},
					{
						id:1,
						name:'已支付',
						theme:'primary'
					},
					{
						id:2,
						name:'已发货',
						theme:'warning'
					},
					{
						id:3,
						name:'确认收货',
						theme:'success'
					},
					{
						id:4,
						name:'申请退货',
						theme:'danger'
					},
					{
						id:5,
						name:'退货完毕',
						theme:'success'
					}
				],
				status:0
			}
		},
		watch:{
			status(v){
				this.queryForm.status = v;
				this.queryForm.pno = 1
				this.loading = false
				this.getOrderListByUserForPage()
			}
		},
		async created(){
			await this.getOrderListByUserForPage()
		},
		
	}
</script>

<style>
</style>
